<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标行为坐标系</title>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script src="demo/Todolist/js/utils.js"></script>
    <script>
        //鼠标行为-》坐标系
        // 鼠标位置相对于当前可视区域的坐标，不包括滚动条的距离
        //clientX: 87
        //clientY: 73
        // 同clientX/Y相同，老版火狐不支持
        //x: 87
        //y: 73

        // 鼠标位置相对于屏幕的坐标
        //screenX: -1599
        //screenY: 185

        // 鼠标位置相对于块元素的坐标，包含边框，safari不包括边框
        //offsetX: 237
        //offsetY: 223

        // 鼠标位置相对于当前文档的坐标（包括滚动条的距离）ie9以下不支持
        //pageX: 87
        //pageY: 73
        // 同pageX/Y相同，ie11以下同clientX/y
        //layerX: 87
        //layerY: 73

        // document.onclick = function(e) {
        //     var e = e || window.event;
        //     console.log(e.pageX + 'f' + e.pageY);
        //     // console.log(pagePos(e));
        // }

        // function pagePos(e) {
        //     var sLeft = getScrollOffset().left,
        //         sTop = getScrollOffset().top,
        //         cLeft = document.documentElement.clientLeft || 0,
        //         cTop = document.documentElement.clientTop || 0;
        //     return {
        // 可视区域+滚动条距离-偏移量
        //         x: e.clientX + sLeft - cLeft,
        //         y: e.clientY + sTop - cTop
        //     }
        // }

        // 拖拽
        // mousedown mouseup mousemove
        var box = document.getElementsByClassName('box')[0],
            x,
            y;
        // box.onmousedown = function(e) {
        //     var e = e || window.event;
        //     x = pagePos(e).x - getStyle(box, 'left');
        //     y = pagePos(e).y - getStyle(box, 'top');

        //     document.onmousemove = function(e) {
        //         var e = e || window.event;
        //         box.style.left = pagePos(e).x - x + 'px';
        //         box.style.top = pagePos(e).y - y + 'px';
        //     }
        //     document.onmouseup = function() {
        //         document.onmousemove = null;
        //         document.onmouseup = null;
        //     }
        // }

        elemDrag(box)

        function elemDrag(elem) {
            var x,
                y;
            addEvent(elem, 'mousedown', function(e) {
                console.log(12);

                var e = e || window.event;
                x = pagePos(e).x - getStyle(elem, 'left');
                y = pagePos(e).y - getStyle(elem, 'top');
                addEvent(document, 'mousemove', mouseMove);
                addEvent(document, 'mouseup', mouseUp);

            })

            function mouseMove(e) {
                var e = e || window.event;
                elem.style.left = pagePos(e).x - x + 'px';
                elem.style.top = pagePos(e).y - y + 'px';

            }

            function mouseUp() {
                var e = e || window.event;
                removeEvent(document, 'mousemove', mouseMove);
                removeEvent(document, 'mouseup', mouseUp);
            }
        }
    </script>
</body>

</html>